import React, {Component} from 'react';
import { Carousel,Button } from 'antd';
import { CaretRightOutlined,CaretLeftOutlined } from '@ant-design/icons'
import './index.less'
class ImgSwiper extends Component {
    render() {
        const {img} = this.props
        return (
            <div>
                <Carousel
                    effect="fade"
                    className='imgSwiper'
                    autoplay={true}
                    ref={node => this.swiper = node}
                    dotPosition={'right'}>
                    {
                        img?.map((item,index) => {
                            return (
                                <img src={item} alt="" key={index}/>
                            )
                        })
                    }
                </Carousel>
                <div className='changeSwiper'>
                    <Button className='ltBtn' onClick={() => this.swiper.prev()}><CaretLeftOutlined/></Button>
                    <Button className='rtBtn' onClick={() => this.swiper.next()}><CaretRightOutlined/></Button>
                </div>

            </div>


        );
    }
}

export default ImgSwiper;